import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, message, Switch, Checkbox, Icon, Card, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import GapBlock from '@/components/GapBlock'
import {
  fetchBaseSetting,
  baseSettingClose,
  saveBaseSetting,
} from '@/services/distribution/setting'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const formItemLayout = {
  labelCol: {
    sm: { span: 12 },
  },
  wrapperCol: {
    sm: { span: 12 },
  },
};
const Base = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState({})
  const [showForm, setFormVisible] = useState(true)
  const [phoneNumberStr, setPhone] = useState(null)
  const [mailAddressStr, setEmail] = useState(null)

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await fetchBaseSetting()
    setData(res.data)
    res.code != 0 && message.warning(res.msg)
  }

  const editData = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      const warningMethods = () => {
        if (values.type.length == 2) return 3
        if (values.type.length == 0) return 0
        if (values.type[0] == 'A') return 1
        if (values.type[0] == 'B') return 2
      }
      showForm ?
      saveBaseSetting({
        balanceWarningValue: values.balanceWarningValue ? '2' : '0',
        isSelfDistribution: values.isSelfDistribution ? '1' : '0',
        mailAddressStr,
        phoneNumberStr,
        balanceWarningValue: values.balanceWarningValue,
        warningMethods: warningMethods()
      }).then(res => message.info(res.msg)) :
      baseSettingClose().then(res => message.info(res.msg))
    })
  }

  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 3: // edit
        return editData(event)    
      default:
        break;
    }
  }
  
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      {data && <Card>
      <Form {...formItemLayout}>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="开启代付金模式">
              {getFieldDecorator('paymentStatus', {
                initialValue: showForm,
                valuePropName: 'checked',
              })(<Switch onChange={checked => setFormVisible(checked)} />)}
            </Form.Item>
          </Col>
        </Row>
        {showForm && <>
          <Row type="flex">
            <Col span={8}>
              <Form.Item label="代付金余额是否预警">
                {getFieldDecorator('isBalanceWarning', {
                  initialValue: data.isBalanceWarning == 2 ? true : false,
                  valuePropName: 'checked',
                  rules: [
                  ],
                })(<Switch />)}
              </Form.Item>
            </Col>
          </Row>
          <Row type="flex">
            <Col span={8}>
              <Form.Item label="开启自我分销">
                {getFieldDecorator('isSelfDistribution', {
                  initialValue: data.isSelfDistribution == 1 ? true : false,
                  valuePropName: 'checked',
                  rules: [
                  ],
                })(<Switch />)}
              </Form.Item>
            </Col>
          </Row>
          <Row type="flex">
            <Col span={8}>
              <Form.Item label="预警提醒额">
                {getFieldDecorator('balanceWarningValue', {
                  initialValue: data.balanceWarningValue,
                  rules: [
                  ],
                })(<Input />)}
              </Form.Item>
            </Col>
          </Row>
          <Row type="flex">
            <Col span={8}>
              <Form.Item label="提醒方式">
                {getFieldDecorator('type', {
                  initialValue: data.type,
                  rules: [
                  ],
                })(
                  <Checkbox.Group>
                    <Row type="flex">
                      <Col span={8}>
                        <Checkbox value="A">短信</Checkbox>
                      </Col>
                      <Col span={16}>
                        <Input onChange={e => setPhone(e.target.value)} />
                      </Col>
                    </Row>
                    <GapBlock />
                    <Row type="flex">
                      <Col span={8}>
                        <Checkbox value="B">邮件</Checkbox>
                      </Col>
                      <Col span={16}>
                        <Input onChange={e => setEmail(e.target.value)} />
                      </Col>
                    </Row>
                    <GapBlock />
                    <Row><Icon type="info-circle" /><b> 有多个用“，”隔开</b></Row>
                  </Checkbox.Group>
                )}
              </Form.Item>
            </Col>
          </Row>
        </>}
      </Form>
      <RenderButtom click={handleBtn} />
      </Card>}
    </PageHeaderWrapper>
    )
}

export default Form.create()(Base)
